<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SQL自动化工具</title>
<link rel="stylesheet" type="text/css" href="./css/common.css?t=201510261445"/>
<link rel="stylesheet" type="text/css" href="./js/uploadifive/uploadifive.css"/>
<style type="text/css">
    .content{
        margin: 0 auto;
        width: 1300px;
        padding: 30px 10px 10px 10px;
    }
    .content .content_top,.content_middle,.content_bottom{
        width: 1300px;
    }
    .content .content_top{
        font-size: 1.3em;
    }
    .content_top .content_top_left, .content_top_right {
    	width: 650px;
    	float: left;
	}
    .content .content_top .content_top_right .btnbox{
        width: 150px;
        line-height:30px;
        float:right;
    }
    .content .content_middle{
        margin-top: 50px;
    }
    .content .content_middle #overviewSQL{
        width: 1300px;
        height: 700px;
        font-size: 1.1em;
    }
    .content .content_top .content_top_left #ddlFile{
   		opacity:0;
    }
    
</style>
</head>
<body>
   <div class="content">
       <div class="content_top">
           <div class="content_top_left">
               <input type="file" id="ddlFile" class="ddlFile">
               <div id="ddlFileQueue"></div>
           </div>
           <div class="content_top_right">
               <input type="button" class="btnbox uploadifive-button" id="downloadModel" value="下载模板"/>
           </div>
       </div>
       <div class="content_middle">
           <textarea name="parsedSQL" id="overviewSQL"></textarea>
       </div>
       <div class="content_bottom"></div>
   </div>
<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./js/uploadifive/jquery.uploadifive.min.js"></script>
<script type="text/javascript">
	var origin = null;
	$(function(){
		$(".ddlFile").uploadifive({
			"uploadScript":"ddlFileUpload.action",
			"buttonClass":"ddlFileBtn",
			"buttonText":"选择文件",
			"fileObjName":"ddlFile",
			"fileSizeLimit":1024,
			"fileType":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
			"uploadLimit":1,
			"queueID":"ddlFileQueue",
			"queueSizeLimit":2,
			"width":150,
			"multi":false,
			"onFallback":function(){
				alert("您的浏览器不支持HTML5，请使用支持HTML5的浏览器！");
			},
			"onAddQueueItem":function(file){
				if(origin != null){
					$('#ddlFile').uploadifive('cancel', origin);
				}
				origin = file;
				var img = file.name;
				var lastname = img.substring(img.lastIndexOf("."),img.length).toLowerCase();
				if(!/^(.xlsx)$/.test(lastname)){
					alert("请上传xlsx格式的文件！");
					$('#ddlFile').uploadifive('cancel', origin);
					origin = null;
				}
			},
			"onUploadComplete":function(file,data){
				var json = JSON.parse(data);
				if(json.reCode == "0"){
					$("#overviewSQL").val(json.sql);
				}else{
					alert(json.reInfo);
				}
			},
			"onProgress":function(file, e){
	            if (e.lengthComputable) {
	                var percent = Math.round((e.loaded / e.total) * 100);
	            }
	            file.queueItem.find('.fileinfo').html(' - ' + percent + '%');
	            file.queueItem.find('.progress-bar').css('width', percent + '%');
	        }
		});
		$("#downloadModel").click(function(){
			top.window.location.href="downloadModel.action?type=ddl"
		});
	});
</script>    
</body>
</html>